<template>
    <div class="newbest-home">
      <div style="width: 100%;line-height: 52px;margin-bottom: 30px;">
        <img class="top-img" src="../assets/icon-board.svg" alt="">
        <span class="left-font30">Metaboard</span>
        <img v-if="utils.isMobile()" class="left-close" @click="closeCli" src="../assets/mobile-icon-closeWhite@2x.png" alt="">
      </div>
      <div class="home-id">
        <div>{{$t('user.Member')}}：</div>
        <div>{{userId}}</div>
      </div>
      <div class="home-id">
        <div>{{$t('user.popuponline')}} ID：</div>
        <div>{{invitationAddress}}</div>        
      </div>
      <div class="newbest-title">{{$t('user.Income')}}：</div>
      <div class="newbest-box">
        <span class="font24">{{utils.weiOneth(totalrevenue)}}</span>
        <div style='float: right;'>
          <span>pETH</span>
          <!-- <img style="width: 12px;vertical-align: middle;margin-left: 5px;" src="../assets/icon-select1@2x.png" alt=""> -->
        </div>
      </div>
      <div class="newbest-box" style="margin-top: 10px;">
        {{$t('user.Equivalent')}}： $ {{usdtPrice}}
      </div>
      <div class="newbest-title">{{$t('user.BalancTH')}}：</div>
      <div class="newbest-box">
        <span style="font-size: 24px;font-weight: bold;">{{ethBalance.toFixed(6)}}</span>
        <!-- <span class="newbest-btn" @click="comingCli" style="background-color:#aaa;">{{$t('user.Immediatelytoreceive')}}</span> -->
        <!-- <span class="newbest-btn" :title="$t('user.Immediatelytoreceive')" :style="userIdVal && dataallList.candy >= 200?'':'pointer-events: none;background-color:#aaa;'" @click="comonCli">{{$t('user.Immediatelytoreceive')}}</span> -->
      </div>
      <div class="newbest-title">{{$t('user.PersonalDownline')}}：</div>
      <div class="newbest-box font20">{{dataallList.personalOffline}}</div>
      <div class="newbest-title">ETH{{$t('user.Wallet')}}：</div>
      <div class="newbest-box">{{userAddress}}</div>
      <div style="width: 100%;display: flex;justify-content: space-between;">
        <div style="cursor: pointer;">
          <img style="width: 20px;vertical-align: middle;" src="../assets/icon-visit@2x.png" alt="">
          <span class="font12" @click="jumpWallAddress">{{$t('user.Toc')}}</span>
        </div>
        <div style="cursor: pointer;" @click="copyActiveCode" v-clipboard:copy="userAddress">
          <img style="width: 15px;vertical-align: middle;" src="../assets/icon-copy@2x.png" alt="">
          <span class="font12">{{$t('user.Copy')}}</span>
        </div>
      </div>
      <div class="newbest-title">{{$t('user.AffiliateLink')}}：</div>
      <div class="newbest-box">{{linkAdress}}</div>
      <div style="width: 100%;display: flex;justify-content: flex-end;cursor: pointer;">
        <div @click="copyActiveCode" v-clipboard:copy="linkAdress">
          <img style="width: 15px;vertical-align: middle;" src="../assets/icon-copy@2x.png" alt="">
          <span class="font12">{{$t('user.Copy')}}</span>
        </div>
      </div>
      <div class="newbest-title">{{$t('user.SmartContractAddress')}}：</div>
      <div class="newbest-box">{{utils.addressVal}}</div>
      <div style="width: 100%;display: flex;justify-content: space-between;">
        <div style="cursor: pointer;">
          <img style="width: 20px;vertical-align: middle;" src="../assets/icon-visit@2x.png" alt="">
          <span class="font12" @click="jumpHeyueAddress">{{$t('user.Toc')}}</span>
        </div>
        <div @click="copyActiveCode" style="cursor: pointer;" v-clipboard:copy="utils.addressVal">
          <img style="width: 15px;vertical-align: middle;" src="../assets/icon-copy@2x.png" alt="">
          <span class="font12">{{$t('user.Copy')}}</span>
        </div>
      </div>
      <div class="newbest-bottombox">
        <div class="font20">{{dataallList.totalNumberOfMembers}}</div>
        <div class="font14" style="margin-top: 5px;">{{$t('user.Totalnumbermembers')}}</div>
        <div>
          <span class="newbest-line"></span>
        </div>
        <div class="font20">{{dataallList.addedToday}}</div>
        <div class="font14" style="margin-top: 5px;margin-bottom: 15px;">{{$t('user.Newforthay')}}</div>
        <div>
          <span class="newbest-line"></span>
        </div>
        <div class="font20">{{utils.weiOneth(dataallList.ethRunningWater)}}</div>
        <div class="font14" style="margin-top: 5px;margin-bottom: 15px;">{{$t('user.Dailearnings')}}</div>
        <div>
          <span class="newbest-line"></span>
        </div>
        <div class="font20">{{utils.weiOneth(dataallList.earnToday)}}</div>
        <div class="font14" style="margin-top: 5px;margin-bottom: 15px;">{{$t('user.Dairnings')}}</div>
      </div>
    </div>
  </template>
  
  <script>
    import Web3 from 'web3'
  export default {
    name: 'metaboardLeft',
    data () {
      return {
        dataallList:{
          addedToday: 0,
          earnToday: 0,
          ethRunningWater: 0,
          personalOffline: 0,
          totalNumberOfMembers: 0,
        },
        userIdVal:false,
        totalProfitNum:0,
        referrer:'',
        
        userId:'',
        linkAdress:'',
        usdtPrice:0,
        userAddress:'',
        invitationAddress:'',
        totalrevenue:'',
        ethBalance:0,
      }
    }, 
    mounted() {
      if (typeof web3 !== 'undefined') {
        web3 = new Web3(web3.currentProvider);
      } else {
          web3 = new Web3(new Web3.providers.HttpProvider(this.utils.HttpProviderIp));
      }
      if(this.$route.params.id){
        this.userAddress = this.$route.params.id;
      }     
      this.getUserNum();
    },
    methods: {     
      //用户合约数据
      async getUserNum(){
        var that = this;         
        var contractAbi = that.utils.tranAbi;
        var contractAddress = that.utils.addressVal;  //合约地址
        var myContract = new web3.eth.Contract(contractAbi, contractAddress, {
          from: that.utils.tranPersonVal, // default from address
          // gasPrice: '10000000000' // default gas price in wei, 10 gwei in this case
        });
        if(that.userAddress == '' || that.userAddress.length == 42){
          ethereum.enable().then(accounts => {
            if(that.userAddress == ''){
              that.userAddress = accounts[0];
            }
            that.getJavaData(that.userAddress);
            web3.eth.getBalance(that.userAddress).then((res)=>{
              that.ethBalance = res/(10e17);
            });
            myContract.methods.PETH_Address_To_ID(that.userAddress).call(function(error, res){
              that.userId = res;
              that.linkAdress = that.utils.homeConfig+'/metaboard/'+that.userId;
            });
            myContract.methods.GetUserInfo(that.userAddress).call(function(error, result){
              if(result[0]){
                myContract.methods.PETH_Address_To_ID(result[2]).call(function(error, res){
                  that.invitationAddress = res;
                });
                that.totalrevenue = result[6];
                that.getETHusdt();
              }else{
                that.$router.push('/metaboard/login')
              }
            });
          })
        }else{
          that.userId = that.userAddress;
          that.linkAdress = that.utils.homeConfig+'/metaboard/'+that.userId;
          myContract.methods.PETH_ID_To_Address(that.userAddress).call(function(error, res){
            that.userAddress = res;
            that.getJavaData(that.userAddress);
            web3.eth.getBalance(that.userAddress).then((res1)=>{
              that.ethBalance = res1/(10e17).toFixed(16);
            });
            myContract.methods.GetUserInfo(that.userAddress).call(function(error, result){
              if(result[0]){
                myContract.methods.PETH_Address_To_ID(result[2]).call(function(error, res){
                  that.invitationAddress = res;
                });
                that.totalrevenue = result[6];
                that.getETHusdt();
              }else{
                that.$router.push('/metaboard/login')
              }
            });
          });
        }
      },
      //用户后端数据
      getJavaData(address){
        var time = (new Date()).valueOf();
        this.$http.get(this.utils.config+'/metapool/user/ps/'+address+'?timestamp='+time+'&token='+this.$md5(address+'WwFEhq4hgK4yBtWmtKYMvyea95'+time)).then((res)=>{
          this.dataallList=res.data.data;
        })
      },
      //移动端关闭左侧
      closeCli(){
        this.$emit('closeLeft',true)
      },
      //获取eth-usdt交易对
      getETHusdt(){
        this.$http.get(this.utils.config+'/metapool/other/eth_usdt').then((res)=>{
          var num = res.data.data.price * this.totalrevenue;
          this.usdtPrice = this.utils.weiOneth(num).toFixed(2);
        })
      },
      //跳转到ETH浏览器钱包地址
      jumpWallAddress(){
        window.open('https://cn.etherscan.com/address/'+this.userAddress);
      },
      //跳转到波场浏览器合约地址
      jumpHeyueAddress(){
        window.open('https://cn.etherscan.com/address/'+this.utils.addressVal)
      },
      //提示信息--复制成功
      copyActiveCode(){
        this.$message.info(this.$t('user.Copysuccessed'));
      },
    },
  }
  </script>
  
  <!-- Add "scoped" attribute to limit CSS to this component only -->
  <style scoped lang="scss">
    .left-close{
      width: 32px;
      position: absolute;
      right: 15px;
      top: 20px;
    }
    .font12{
      font-size: 12px;
      color: #FFA82E;
    }
    .font14{
      font-size: 14px;
      color: rgba(255, 255, 255, .5);
    }
    .font20{
      font-size: 20px!important;
      font-weight: bold;
    }
    .font24{
      font-size: 24px;
      font-weight: bold;
    }
    .home-id{
      width: 100%;
      display: flex;
      justify-content: space-between;
      margin-bottom: 8px;
      >div:nth-child(1){
        font-size: 14px;
        color: rgba(255, 255, 255, .3);
      }
      >div:nth-child(2){
        font-size: 18px;
        color: #EFB133;
      }
    }
    .newbest-home{
      color: #fff;
      display: flex;
      flex-direction: column;
      align-items: center;
      padding: 20px;
      text-align: left;
      /* background-image: linear-gradient(to top,#100A19,#2C0158); */
      background-color: #141414;
    }
    .newbest-box{
      width: 100%;
      height: 40px;
      line-height: 28px;
      background-color: #3E3E3E;
      padding: 6px 10px;
      font-size: 14px;
      border-radius: 6px;
      white-space: nowrap;
      text-overflow: ellipsis;
      overflow: hidden;
    }
    .newbest-title{
      width: 100%;
      text-align: left;
      font-size: 16px;
      color: rgba(255, 255, 255, .5);
      margin-top: 30px;
      margin-bottom: 10px;
    }
    .newbest-bottombox{
      width: 100%;
      padding: 30px 0px 23px 0px;
      background-color: #3E3E3E;
      border-radius: 10px;
      text-align: center;
      margin-top: 30px;
    }
    .newbest-line{
      display: inline-block;
      width: 79px;
      height: 1px;
      background-color: rgba(255, 255, 255, .1);
      margin: 20px 0px;
    }
    .newbest-btn{
      float: right;
      display: inline-block;
      cursor: pointer;
      width: 96px;
      height: 40px;
      line-height: 40px;
      background-color: #8C50DF;
      border-radius: 6px;
      text-align: center;    
      margin-top: -6px;
      margin-right: -10px;
      font-size: 16px;white-space: nowrap;
      text-overflow: ellipsis;
      overflow: hidden;
    }
    @media only screen and (min-width: 0px) and (max-width: 639px){
      .top-img{
        width: 32px;
        height: 32px;
        margin-right: 6px;
      }
      .left-font30{
        font-size: 24px;
        position: relative;
        top: -9px;
      }
    }
    @media only screen and (min-width: 640px){
      .top-img{
        width: 52px;
        height: 52px;
        margin-right: 6px;
      }
      .left-font30{
        font-size: 30px;
        position: relative;
        top: 10px;
      }
    }
  </style>
  